<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu"
             :default-active="onRoutes"
             :collapse="collapse"
             background-color="#324157"
             text-color="#bfcbd9"
             active-text-color="#20a0ff"
             unique-opened
             router>
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index"
                      :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs"
                          :index="subItem.index"
                          :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem,i) in subItem.subs"
                              :key="i"
                              :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else
                            :index="subItem.index"
                            :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index"
                        :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';
export default {
  data () {
    return {
      collapse: false,
      items: []
    };
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '');
    }
  },
  created () {
    this.get();
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', (msg) => {
      this.collapse = msg;
      bus.$emit('collapse-content', msg);
    });
  },
  methods: {
    get () {
      if (localStorage.getItem('role') == '普通员工' || localStorage.getItem('role') == '无') {
        // this.items = [
        //     {
        //         icon: 'el-icon-lx-home',
        //         index: 'myHomePage',
        //         title: '主页'
        //     }
        // ];
        this.items = [
          {
            icon: 'el-icon-lx-home',
            index: 'myHomePage',
            title: '主页',
            subs: [
              {
                icon: 'el-icon-lx-people',
                index: 'person',
                title: '修改信息'
              }
            ]
          },
          {
            icon: 'el-icon-lx-copy',
            index: 'UserManage',
            title: '客户服务',
            subs: [
              {
                index: 'createCourse',
                title: '新建课程'
              },
              {
                index: 'courseManage',
                title: '客户管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-home',
            index: 'exam',
            title: '考试相关',
            subs: [
              {
                icon: 'el-icon-lx-people',
                index: 'title',
                title: '题目表'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'createTitle',
                title: '新建题目'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'CreateTest',
                title: '创建考试'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'TopicManage',
                title: '试卷管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '3',
            title: '到货管理',
            subs: [
              {
                index: '/DriverReceipt',
                title: '司机回执单管理'
              },
              {
                index: '/FreightReceipt',
                title: '货物回执单管理'
              },
              {
                index: '/UserReceipt',
                title: '客户回执单管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '4',
            title: '权限管理',
            subs: [
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/prem',
                title: '权限设置'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/role',
                title: '角色设置'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/userrole',
                title: '人员设置'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '5',
            title: '结算管理',
            subs: [
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/WaybillSettle',
                title: '货运单结算'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/WaybillSettleHistory',
                title: '货运单结算历史'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/CollectionSettle',
                title: '代收结算'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/CollectionSettleHistory',
                title: '代收结算历史'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/DriverSettle',
                title: '司机结算'
              },
              //   {
              //     icon: 'el-icon-lx-redpacket_fill',
              //     index: '/settle/DriverSettleHistory',
              //     title: '司机结算历史'
              //   },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/BusinessChange',
                title: '业务变更'
              },
              //     {
              //     icon: 'el-icon-lx-redpacket_fill',
              //     index: '/settle/FinancialCost',
              //     title: '财务费用管理'
              //   }
            ]
          },
          {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/studentAdministration',
            title: '学员管理'
          },
          {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/freight',
            title: '货运单管理'
          }, {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/freightVehicle',
            title: '运输管理'
          }
        ];
      } else {
        this.items = [
          {
            icon: 'el-icon-lx-home',
            index: 'myHomePage',
            title: '主页',
            subs: [
              {
                icon: 'el-icon-lx-people',
                index: 'person',
                title: '修改信息'
              }
            ]
          },
          {
            icon: 'el-icon-lx-copy',
            index: 'UserManage',
            title: '客户服务',
            subs: [
              {
                index: 'UserManage',
                title: '客户管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-copy',
            index: 'EmployeManage',
            title: '员工服务',
            subs: [
              {
                index: 'EmployeManage',
                title: '员工管理'
              },
              {
                index: 'RoleManage',
                title: '角色管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-home',
            index: 'exam',
            title: '考试相关',
            subs: [
              {
                icon: 'el-icon-lx-people',
                index: 'title',
                title: '题目表'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'createTitle',
                title: '新建题目'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'CreateTest',
                title: '创建考试'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'TopicManage',
                title: '试卷管理'
              }
            ]
          },
           {
            icon: 'el-icon-lx-home',
            index: 'aaa',
            title: '结算中心',
            subs: [
              {
                icon: 'el-icon-lx-people',
                index: 'complaint',
                title: '客户订单详情'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'find',
                title: '查询投诉'
              },
              {
                icon: 'el-icon-lx-people',
                index: 'car',
                title: '车辆信息查询'
              },

            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '3',
            title: '到货管理',
            subs: [
              {
                index: '/DriverReceipt',
                title: '司机回执单管理'
              },
              {
                index: '/FreightReceipt',
                title: '货物回执单管理'
              },
              {
                index: '/UserReceipt',
                title: '客户回执单管理'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '3',
            title: '培训实施',
            subs: [
              {
                index: 'training',
                title: '培训管理'
              },
              {
                index: 'createTraining',
                title: '新建培训'
              },
              {
                index: 'Certificate',
                title: '上传证书'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '4',
            title: '权限管理',
            subs: [
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/prem',
                title: '权限设置'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/role',
                title: '角色设置'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/userrole',
                title: '人员设置'
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',

            index: '5',
            title: '结算管理',
            subs: [
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/WaybillSettle',
                title: '货运单结算'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/WaybillSettleHistory',
                title: '货运单结算历史'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/CollectionSettle',
                title: '代收结算'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/CollectionSettleHistory',
                title: '代收结算历史'
              },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/DriverSettle',
                title: '司机结算'
              },
              //   {
              //     icon: 'el-icon-lx-redpacket_fill',
              //     index: '/settle/DriverSettleHistory',
              //     title: '司机结算历史'
              //   },
              {
                icon: 'el-icon-lx-redpacket_fill',
                index: '/settle/BusinessChange',
                title: '业务变更'
              },
              //     {
              //     icon: 'el-icon-lx-redpacket_fill',
              //     index: '/settle/FinancialCost',
              //     title: '财务费用管理'
              //   }
            ]
          },
          {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/studentAdministration',
            title: '学员管理'
          }, {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/freight',
            title: '货运单管理'
          }, {
            icon: 'el-icon-lx-redpacket_fill',
            index: '/freightVehicle',
            title: '运输管理'
          },          {
                      icon: 'el-icon-lx-calendar',

                        index: 'complaints',
                        title: '投诉管理',
                        subs: [
                           {
                            icon: 'el-icon-lx-complaints',
                            index: 'complaints-nquire',
                            title: '投诉查看'
                          },
                          {
                            icon: 'el-icon-lx-complaints',
                            index: 'complaints-add',
                            title: '投诉登记'
                          },
                          {
                            icon: 'el-icon-lx-complaints',
                            index: 'complaints-history',
                            title: '投诉历史'
                          }
                        ]
                      }
        ];
      }
    }
  }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
</style>